<html>
	<head>
    	<title>/ASCII/</title>
	</head>
    <style type="text/css">
		body{
			font-family:Verdana, Geneva, sans-serif;
			width:800px;
			margin:0 auto;
			padding: 10px;
		}
		.error{
			color:red;
		}
		
		label{
			display:marker;
			font-size:20px;
		}
		
		input[type = text]
		{
			width:400px;
			font-size:20px;
			padding:2px;
		}
		
		input[type = submit]
		{

			font-size:24px;

		}
		textarea
		{
			width:400px;
			height:200px;
			font-size:17px;
			font-family:"Lucida Console", Monaco, monospace
		}
		
		hr
		{
			margin:20px;
		}
		
		.art +.art{
			margin-top:100px;
		}
		
		.art-title
		{
			font-weight:bold;
			font-size:20px;
		}
		
		.art-body
		{
			margin:0;
			font-weight:bold;
			font-size:17px;
		}
		
	</style>
    
    
    <body>
        <h1>/ASCII/</h1>
    	<form method="post">
        	<label>
            	<div>title</div>
                <input type="text" name="title" value="{{title}}">
            </label>
            
            <label>
            	<div>art</div>
                <textarea name="art">{{art}}</textarea>
            </label>
            
            <div class="error">{{error}}</div>
            
            <input type="submit">

        </form>
        
        <hr>
        
        {% for art in arts %}
        	<div class="art">
            	<div class="art-title">{{art.title}}</div>
                <pre class="art-body">{{art.art}}</pre>
            </div>
        {%  endfor %}
    </body>
</html>